<template>
  <div style="padding:2%">
    <center>
      <h1 class="title">{{ $route.meta.title }} </h1>
    </center>
    <div class="btn-groups" style="height:50px">

      <a-button type="primary"  class="btn" @click="downLoadFile">
        <template #icon>
          <DownloadOutlined />
        </template>实验指导书下载
      </a-button>
      <a-upload :file-list="fileList" name="file"  :before-upload="uploadFile" maxCount="1" action="" method="get"
        @change="handleChange">
        <a-button>
          <upload-outlined />
          提交报告
        </a-button>
      </a-upload>
    </div>

    <RouterView />

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import message from 'ant-design-vue/es/message';
import { UploadProps } from 'ant-design-vue/lib/upload';
import { UploadChangeParam } from 'ant-design-vue/es/upload/interface';
import instructionfile from '@/assets/exp1_instruction.pdf'
import { useExperimentStore } from '@/store/experiment'
const rt = useRoute()
const experimentStore = useExperimentStore()

function formatDateTime(date, format) {
  const o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
    'H+': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    S: date.getMilliseconds(), // 毫秒
    a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
    A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
  };
  if (/(y+)/.test(format)) {
    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
    }
  }
  return format;
}
const fileList = ref<UploadProps['fileList']>([])

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status !== 'uploading') {
    // console.log('uploading')
  }
  if (info.file.status === 'done') {
    fileList.value = [];
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 上传失败`);
  }
};

const uploadFile = async (report) => {
  // 生成一个表单文件
  let formData = new FormData();

  formData.append("experiment_id", rt.meta.id.toString())
  formData.append("report", report)

  const date = new Date();
  const formatDate = formatDateTime(date, 'yyyy-MM-dd HH:mm:ss');

  formData.append("submit_time", formatDate)
  const res = await experimentStore.uploadReport(formData)
  // console.log('res', res);
  if (res.success == true) {
    message.success('提交成功')
  }
  else {
    message.error(res.msg)
  }

}
function downLoadFile() {
  window.open(instructionfile, '_blank');
}

</script>

<style scoped lang="less">
.title {
  font-family: sans-serif;
  font-size: 30px;
}

.btn-groups {
  display: flex;
  justify-content: flex-end;
}
.btn{
  margin-right: 10px;
}
</style>
